<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>登记记录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
    <style type="text/css">
      body{
        background-color: #fff;
      }
      .con p{
        margin-bottom: 4px;
      }
      .add{
        position: fixed;
        right: 20px;
        bottom: 50px;
      }
      .add img{
        width: 3.5rem;
        height: 3.5rem;
      }
	  .wxk{height:3vh;}
    </style>
	</head>

	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">登记记录</h1>
      </header>
	  <div class="wxk"></div>
      <div id="refreshContainer" class="mui-scroll-wrapper bg-white mui-content">
        <div class="mui-scroll">
          <ul class="mui-table-view commonList">
          	<li class="list" v-for="item in list">
          	  <div class="mui-table-cell flex justify-between align-center">
          	    <p class="text-block text-df flex-sub text-cut">{{item.stationName}}</p>
                 <div class="tag-sm bg-blue text-white text-sm round" v-if="item.leaveStatus===1" @click="leave(item)">
                   <span>确认离场</span>
                 </div>
          	  </div>
              <div class="con"> 
                <p class="text-grey text-sm">入场时间：{{item.approachTime}}</p>
                <p class="text-grey text-sm" v-if="item.leaveStatus===2">离场时间：{{item.departureTime}}</p>
              </div>
              <div class="mui-table-cell flex justify-between align-center con">
                <p>事由：{{item.content}}</p>
              </div>
          	</li>
          </ul>
        </div>
      </div>
      <div class="add" v-if="showList" @click="checkIn()">
        <img src="../img/add.png" >
      </div>
    </div>
  <script src="../../../js/mui.min.js"></script>
  <script src="../../../js/vue.js"></script>
  <script src="../../../js/jquery-1.7.2.min.js"></script>
  <script src="../js/sqlite.js"></script>
  <script src="../formal/js/api.js"></script>
  <script src="../js/mkeyplus.base.js"></script>
		<script type="text/javascript">
			var htapi = new HTGlobal();
			mui.init()
      var record = null;
      var size = 15;
      var page = 0;
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              page = 0;
              load(page);
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              // countDown++;
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              /*每次加载动态的添加一个li*/
              // $("#testUl").append($("<li>" + new Date() + "</li>"));
              this.endPullupToRefresh(false)
              page++;
              load(page);
            }
          }
        }
      });
      mui.plusReady(function() {
        load(page);
      })
      record = new Vue({
      	el: '#container',
        data: {
        	height1: 0, // 列表高度
			list:[],
			showList:true
        },
        created:function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
          	var height = window.innerHeight - 95;
          	this.height1 = height;
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
          leave(item){
            var that=this;
            var btnArr = ['确认', '取消'];
            mui.confirm('确认离场吗?', '提示', btnArr, function(e) {
              if (e.index == 0) {
				htapi.fetch({
                  id:localStorage.getItem('outUserId'),
                  projectAppUserId:item.id
                },function(data){
					
					if(data.code!='0')
					mui.toast(data.msg);
					page=0;
					that.list=[]
					load(page);
				},'调整中','leave','post')  
              }
            });
            
          },
          checkIn(){
            mui.openWindow({
              url: '../formal/registration_on.html',
              id: 'registration_on.html',
              extras: {
               
              },
			  waiting:{
			  	autoShow:false
			  }
            });
          }
        }
      })
      window.addEventListener("update", function(e) {
        console.log('更新数据');
        page=0;
        load(page);
        // var opener= plus.webview.currentWebview().opener();
        // var id=opener.id
        // page = plus.webview.getWebviewById(id);
        // mui.fire(page,'update');
      });
      function load(page) {
        if(page===0){
          //plus.nativeUI.showWaiting('加载中...');
        }
		
		htapi.fetch({
          appUserId:localStorage.getItem('outUserId'),
          page: page,
          size: size,
          orderByColumn:'approachTime',
          isAsc:'desc'
        },function(data){
			  //console.log(JSON.stringify(data));
			  data.data.list.forEach(function(item){
				// console.log(item.approachTime.substring(0,10))
				if(item.approachTime!==null){
				  item.approachTime=item.approachTime.substring(0,16)
				}
				if(item.departureTime!==null){
				  item.departureTime=item.departureTime.substring(0,16)
				}
				
			  })
			  if (page == 0) {
				record.list = []
			  }
			  record.list = record.list.concat(data.data.list)
			  //如果有未离场的记录隐藏添加登记按钮
			  if(Array.isArray(record.list)){
				  
				record.showList = record.list[0] && record.list[0].leaveStatus!=1;
				 
			  }
			  
			  
			  // console.log('设备档案数据' + JSON.stringify(data))
			  //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
			  if (data.data.list.length < size) { //
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
				return;
			  } else {
				mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
				mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
			  }			
		},'加载中','registration')
		
      }
		</script>
	</body>

</html>
